<template>
  <div id="app">
    <ul>
      <li v-for="item in todoList" :key="item.id">
        <input type="text" :value="item.name">
        <input type="button" value="增加" @click="ev_addItem(item)">
        <input type="button" value="删除" @click="ev_deleteItem(item)">
        <input type="button" value="修改" @click="ev_changeItem(item)">
      </li>
    </ul>
    <!-- <el-button type="text" @click="ev_addItem"></el-button> -->

  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  methods:{
    ev_addItem(item) {
      this.listIndex=this.$store.getters.findIndex(item)
        this.$prompt('请输入name', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$store.commit("add",{
            index:this.listIndex+1,item:{
              id:Math.random()*1000,
              name:value
            }
          })
        }).catch(() => {     
        });
      
    },
    ev_deleteItem(item){
      this.listIndex=this.$store.getters.findIndex(item);
      this.$store.commit("delete",{index:this.listIndex})
    },
    ev_changeItem(item){
      this.listIndex=this.$store.getters.findIndex(item)
        this.$prompt('修改name', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$store.commit("change",{
            index:this.listIndex,
            name:value
          })
        }).catch(() => {     
        });
    }
  },
  data(){
    return{
      listIndex:0,
      todoList:[]
    }
  },
  created(){
    this.todoList=this.$store.state.todoList
  }
}
</script>

<style lang="less">
#app {
  
}
ul,li{
  list-style: none;
}
li{
  display: flex;
  border: 1px solid;
  height: 50px;
  justify-content: space-around;
  input{
    width: 50px;
    height: 30px;
    border: none;
    outline: none;
    margin-top: 10px;
  }
}
</style>
